<template>
    <div class="echart-chart">
        <div class="inside">
            <header>平均家庭收入</header>
            <div class="chartBox clearfix">
                <div class="chart-div" id="Average-household-income-chart" v-show="!chartNoDataShow"></div>
                <p ref="than_state_family_average"></p>
                <p ref="than_US_family_average"></p>
                <h4 v-show="chartNoDataShow">暂未查询到数据！</h4>
            </div>
            <p v-show="false">{{getCityIndexData}}</p>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                myEcharts: '',
                chartNoDataShow: false, //判断是否有无数据
            }
        },
        computed: {
            //从state获取城市指数数据
            getCityIndexData() {
                if(this.$store.getters.get_cityIndexData){
                    //获取平均家庭收入数据
                    if(Object.keys(this.$store.getters.get_cityIndexData).length != 0){
                        this.chartNoDataShow = false;
                        let data = this.$store.getters.get_cityIndexData;
                        //延时1s，否则会造成死循环，或者其他报错
                        this.$nextTick(() => {
                            this.Average_household_income_charts(data.annualHomeIncomeLocal, data.annualHomeIncomeState, data.annualHomeIncomeUs);
                            this.$refs.than_state_family_average.innerText = this.than_state(data.annualHomeIncomeLocal, data.annualHomeIncomeState);
                            this.$refs.than_US_family_average.innerText = this.than_state(data.annualHomeIncomeLocal, data.annualHomeIncomeUs);
                        });
                    }else{
                        this.chartNoDataShow = true;
                    }
                }
                return this.$store.getters.get_cityIndexData
            },
        },
        created() {
        },
        mounted() {
            this.myEcharts = echarts.init(document.getElementById('Average-household-income-chart'));
            this.myEcharts.showLoading();
            window.addEventListener('resize', () => {
                this.myEcharts.resize();
            });
        },
        methods: {
            //平均家庭收入——柱状图
            Average_household_income_charts(local, state, US) {
                this.myEcharts.hideLoading();
                this.myEcharts.setOption({
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    xAxis: {
                        data: ["本地", "本州", "全美"],
                        //坐标轴刻度标签的相关设置
                        axisLabel:{
                            color: '#969696'
                        },
                        //坐标轴轴线相关设置
                        axisLine:{
                            lineStyle:{
                                color: '#969696'
                            }
                        },
                        //坐标轴刻度相关设置
                        axisTick:{
                            show: false,
                        },
                    },
                    yAxis: {
                        type: 'value',
                        //坐标轴刻度标签的相关设置
                        axisLabel: {
                            show: false,
                        },
                        //分隔线的相关设置
                        splitLine: {
                            lineStyle:{
                                color: '#f1f1f1'
                            }
                        },
                        //坐标轴轴线相关设置
                        axisLine:{
                            lineStyle:{
                                color: '#969696'
                            }
                        },
                        //坐标轴刻度相关设置
                        axisTick:{
                            show: false,
                        },
                    },
                    series: [{
                        name: '平均家庭收入',
                        type: 'bar',
                        barWidth: '40',
                        label: {
                            normal: {
                                show: true,//柱子上边显示文字标签
                                position: 'top',
                                formatter: param => {
                                    return this.$accounting.formatMoney(param.value, "$", 0);
                                },
                                offset: [0, -5],
                                textStyle: {
                                    fontSize: 16,
                                    color: '#000',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        data: [
                            {
                                name: '本地',
                                value: local,
                                itemStyle:{
                                    color: '#40c3f9',
                                }
                            },
                            {
                                name: '本州',
                                value: state,
                                itemStyle:{
                                    color: '#ffbf53',
                                }
                            },
                            {
                                name: '全美',
                                value: US,
                                itemStyle:{
                                    color: '#fe5960',
                                }
                            }
                        ],
                    }],
                    animationEasing: 'elasticOut',
                    color: ['#40c3f9', '#ffbf53', '#fe5960'],
                });
            },
            //判断比本州家庭平均收入
            than_state(local, state) {
                let val = '';
                if (local == 0 || state == 0) {
                    val = '';
                } else {
                    if (local > state) {
                        val = '比本州家庭平均收入高' + this.$accounting.formatMoney((local / state - 1) * 100, "", 2, "", ".", "%s%v") + '%';
                    } else {
                        val = '比本州家庭平均收入低' + this.$accounting.formatMoney((1 - local / state) * 100, "", 2, "", ".", "%s%v") + '%';
                    }
                }
                return val;
            },
            //判断比全美家庭平均收入
            than_US(local, US) {
                let val = '';
                if (local == 0 || US == 0) {
                    val = '';
                } else {
                    if (local > US) {
                        val = '比全美家庭平均收入高' + this.$accounting.formatMoney((local / US - 1) * 100, "", 2, "", ".", "%s%v") + '%';
                    } else {
                        val = '比全美家庭平均收入低' + this.$accounting.formatMoney((1 - local / US) * 100, "", 2, "", ".", "%s%v") + '%';
                        ;
                    }
                }
                return val;
            },


        },
        components: {}
    }
</script>

<style scoped lang="less" type="text/less">
</style>
